'use strict';
import React from "react";
import {ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import Container from "../../component/common/Container";
import ImageView from "../../component/common/ImageView";
import Button from "../../component/common/Button";
import CommonListRow from "../../component/home/CommonListRow";
import ServicesApi from "../../config/ServicesApi";
import {diffTime} from "../../util/Tool";
import Images from "../../asset";

class UserCenter extends React.Component {

    constructor(props) {
        super(props);
        const {params} = this.props.navigation.state;
        this.author_id = params.author_id;
        // console.log('传过来的author_id---------->',this.author_id);
        this.state = {articleData: [], videoData: [], userData: {}}
    }

    componentDidMount() {
        this.requestDataSource();
    }

    _onPressWatch = async () => {
        let url = ServicesApi.FOCUS_SAVE;
        let data = {
            focus_user: global.secretKey,
            focus_by_user: this.author_id,
        };
        const result = await Services.post(url, data);
        // console.log('关注返回---------->',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            // let oldData = this.state.dataSource.slice(index, 1);
            // this.setState({ dataSource: oldData })
            ToastManager.show('关注成功!');
        } else {
            ToastManager.show(result.dec || 'error');
        }
    };

    requestDataSource = async () => {
        const data = {
            author_id: this.author_id,
            focus_user: global.secretKey,
            audit_status: 'through',
        };
        const result = await Services.post(ServicesApi.INFORMATION_QUERY, data);
        // console.log('作者首页返回----------->',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            let articleData = [];
            let videoData = [];
            result.data.map((item, i) => {
                if (item.article_type === '2') { //视频
                    videoData.push(item);
                } else { //文章
                    articleData.push(item);
                }
            });
            this.setState({articleData: articleData, videoData: videoData})
        }
        const userInfoResult = await Services.post(ServicesApi.GET_USER_INFO, {member_id: this.author_id});
        // console.log('作者信息返回----------->',userInfoResult);
        if (userInfoResult.code === StatusCode.SUCCESS_CODE) {
            this.setState({userData: userInfoResult.data})
        }
    };

    _onPressItem = (item, index) => {
        RouterHelper.push('', 'ArticleDetails', {information_id: item.information_id});
    };

    _onPressVideoItem = (item, index) => {
        RouterHelper.push('', 'VideoDetail', {information_id: item.information_id});
    };

    renderArticleData = () => {
        const {articleData} = this.state;
        return (
            articleData.length !== 0 ?
                <View style={styles.itemView}>
                    <View style={styles.itemHead}>
                        <View
                            style={styles.lineView}
                        />
                        <Text style={styles.itemTitle}>文章</Text>
                    </View>
                    {articleData.map((item, i) => {
                        return (
                            <CommonListRow
                                key={i}
                                {...item}
                                dic_code={StatusCode.DIC_CODE_LATEST}
                                onPress={() => this._onPressItem(item, i)}
                            />
                        )
                    })}
                </View>
                : null
        )
    };

    renderVideoData = () => {
        const {videoData} = this.state;
        const width = SCREEN_WIDTH * 0.282;
        const height = width * 0.657;
        return (
            videoData.length !== 0 ?
                <View style={styles.itemView}>
                    <View style={styles.itemHead}>
                        <View
                            style={styles.lineView}
                        />
                        <Text style={styles.itemTitle}>视频</Text>
                    </View>
                    {videoData.map((item, i) => {
                        return (
                            <TouchableOpacity
                                style={styles.videoItem}
                                onPress={() => this._onPressVideoItem(item, i)}
                            >
                                <View style={styles.videoLeftItem}>
                                    <Text style={styles.videoTitle} numberOfLines={2}>{item.information_title}</Text>
                                    <Text style={styles.videoTime}>{diffTime(item.publish_time)}</Text>
                                </View>
                                <ImageView
                                    style={[styles.videoImgBg, {width, height}]}
                                    source={item.cover_url ? {uri: item.cover_url} : Images.img_shop_default}
                                    resizeMode={'stretch'}
                                >
                                    <ImageView
                                        tintColor={'#fff'}
                                        source={Images.icon_video_play}
                                        style={styles.videoPlayBg}
                                    />
                                </ImageView>
                            </TouchableOpacity>
                        )
                    })}
                </View>
                : null
        )
    };

    render() {
        const width = SCREEN_WIDTH;
        const height = width * 0.389;
        const {userData} = this.state;
        return (
            <Container>
                <ImageBackground
                    style={{width, height}}
                    source={Images.img_user_center_head}
                >
                    <ImageView
                        style={styles.backIcon}
                        source={Images.icon_back}
                    />
                    <View style={styles.headRow}>
                        <ImageView
                            resizeMode={'cover'}
                            style={styles.userHead}
                            source={userData.user_img ? {uri: userData.user_img} : Images.icon_default_avatar}
                        />
                        <View style={styles.userInfoView}>
                            <Text style={styles.userName}>{userData.user_nickname}</Text>
                            <Text
                                style={styles.infoText}>{`粉丝：${userData.followers_count ? userData.followers_count : 0}`}</Text>
                            <Text style={styles.infoText}>{userData.user_remark}</Text>
                        </View>
                        <Button
                            onPress={this._onPressWatch}
                            style={styles.watchButton}
                            titleStyle={styles.buttonTitle}
                            title={'关注'}
                        />
                    </View>
                </ImageBackground>
                <ScrollView>
                    <this.renderArticleData/>
                    <this.renderVideoData/>
                </ScrollView>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    backIcon: {
        marginTop: 14 + Theme.statusBarHeight,
        marginLeft: 15,
        width: 17,
        height: 17,
    },
    headRow: {
        marginHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 10,
    },
    userHead: {
        width: 62,
        height: 62,
        borderRadius: 62 / 2,
    },
    userInfoView: {
        marginHorizontal: 24,
        flex: 1,
    },
    userName: {
        fontSize: FontSize(16),
        color: "#ffffff",
    },
    infoText: {
        marginTop: 5,
        fontSize: FontSize(12),
        color: "#e6e6e6",
    },
    watchButton: {
        borderRadius: 15,
        paddingHorizontal: 19,
        paddingVertical: 6,
        backgroundColor: '#d8d8d8',
    },
    buttonTitle: {
        fontSize: FontSize(12),
        color: "#ffffff",
    },
    itemView: {
        marginTop: 15,
    },
    itemHead: {
        marginLeft: 15,
        flexDirection: 'row',
        alignItems: 'center',
    },
    lineView: {
        alignSelf: 'stretch',
        width: 8,
        backgroundColor: "#ffa64f",
    },
    itemTitle: {
        marginLeft: 10,
        fontSize: FontSize(16),
        color: "#333",
    },
    videoItem: {
        marginHorizontal: 15,
        marginVertical: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    videoLeftItem: {
        flex: 1,
        justifyContent: 'space-between',
    },
    videoTitle: {
        fontFamily: "PingFangSC-Regular",
        fontSize: FontSize(14),
        lineHeight: 20,
        color: "#4a4a4a",
    },
    videoTime: {
        fontSize: FontSize(12),
        color: "#929292",
    },
    videoImgBg: {
        marginLeft: 40,
        borderRadius: 7,
        alignItems: 'center',
        justifyContent: 'center',
        opacity: 0.8,
    },
    videoPlayBg: {
        width: 21,
        height: 21,
    },
});

export default UserCenter